import { createContext } from "preact";
import { useContext, useState } from "preact/hooks";
import { html } from "htm/preact";

export const AppContext = createContext({
  isDark: false,
  tab: 0,
  setTab: (tab) => {},
});

export function AppWrapper({ children }) {
  const [state, update] = useState({
    isDark: false,
    tab: 0,
    setTab,
  });

  function setTab(tab) {
    if (typeof tab === "number") {
      update(Object.assign({}, state, { tab: tab }));
    }
  }

  return html`<${AppContext.Provider} value="${state}">${children}<//>`;
}

export function useAppContext() {
  return useContext(AppContext);
}
